<template>
  <div class="baseBox">
    <div>
      <div class="box" id="box1">
        <ul v-if="isDisplay">
          <li v-for="(ipAddr, index) in arrIpAddrs" :class="{firstbackcolor:ipAddr.ischoose}" @click="getUse($event)" :key="index">{{
            ipAddr.ipaddr
          }}</li>
        </ul>
      </div>
      <div class="box" id="box2">
        <ul v-show="isUseDisplay">
          <li class="liofact" @click="getCameraState(ipvalue, $event)">获取红外相机状态</li>
          <li class="liofact" @click="contactCamera(ipvalue, $event)">对红外相机执行通电操作</li>
          <li class="liofact" @click="poweroffCamera(ipvalue, $event)">对红外相机进行断电操作</li>
          <li class="liofact" @click="lsMedia(ipvalue, $event)">列出SD卡根目录下所有文件目录</li>
          <li class="liofact" @click="listFilesDetail(ipvalue, $event)">列出SD卡对应路径文件的详细信息(可下载文件)</li>
          <!-- <li @click="getbaseimg(ipvalue, $event)">下载所选IP地址微基站的图片</li> -->
        </ul>
      </div>
      <div class="box" id="box3">{{ targetip }}<br/>{{ reqstatus }}<br />
        <button><input type="checkbox"  v-model="checkedAll" @change="checkAll()" ><span>全选</span></button>
        <button @click="fileDownload()">下载</button>
        <button @click="fileDelete()">删除</button>
        <!-- <button @click="test()">测试</button> -->
      <div id="resDataBox">
        <ul v-show="isDisplayResFileNameData">
          <li v-for="(FileName,index) in arrFileName" :key="index" >
            <input type="checkbox" v-model="FileName.checked" v-show="FileName.isshow" :disabled="FileName.disabled" >
            <b>{{FileName.downloadStatus}}</b>{{FileName.Filename}}
          </li>
        </ul>
      </div>
      </div>
    </div>
    <transition name="fade">
      <baseloading v-if="isLoading"></baseloading>
    </transition>
  </div>
</template>

<script>
import baseloading from './components/loading/index.vue'
import axios from 'axios';

export default {
  components: {
    baseloading
  },
  data() {
    return {
      isadd: "",
      ipAddr: "",
      ipAddrvalue: "",
      isArrdsDisplay: false,
      isUseDisplay: false,
      arrIpAddrs: [{ipaddr:"",ischoose:false}],
      isDisplay: false,
      ipvalue: "",
      targetip: "",
      reqstatus: "",
      isLoading: false,
      timer:'',
      airplaneip:"192.168.103.50",
      isDisplayResFileNameData:true,
      checkedAll:false,
      reqPath:"",
      arrFileName:[
        {Filename:"",checked:false,downloadStatus:""}
      ],
    }
  },
  props: {

  },
  methods: {
    getUse($event) {
      this.isUseDisplay = true;
      this.ipvalue = $event.target.innerText;
      console.log(this.ipvalue);
      this.targetip = `你现在选择的是${this.ipvalue}`;
      this.isDisplayResFileNameData=false;
    },
    getCameraState(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      axios({
        method: 'get',
        url: `http://${url}:8080/get_camera_state/`,

      }).then((res) => {
        this.reqstatus = `红外相机状态是${res.data}`;
      }).catch(err => {
        this.reqstatus = `请求失败${err}`;
      })
    },
    contactCamera(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      axios({
        method: 'post',
        url: `http://${url}:8080/contact_camera/`,

      }).then((res) => {
        this.reqstatus = res.data
      }).catch(err => {
        this.reqstatus = `请求失败${err}`;
      })
    },
    poweroffCamera(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      axios({
        method: 'get',
        url: `http://${url}:8080/poweroff_camera/`,

      }).then((res) => {
        if(res.data==="null"){
          this.reqstatus="红外相机已断电";
        }else if(res.data==="true"){
          this.reqstatus="红外相机断电成功";
        }else if(res.data==="false"){
          this.reqstatus="断电操作异常失败";
        }
      }).catch(err => {
        this.reqstatus = `请求失败${err}`;
      })
    },
    lsMedia(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      axios({
        method: 'get',
        url: `http://${url}:8080/ls_media/`,

      }).then((res) => {
        let arr = JSON.stringify(res.data).replace(/[{}]/g,"").split(",");
        for(let i=0;i<arr.length;i++){
          this.arrFileName[i]={Filename:`${arr[i]}`,checked:false,downloadStatus:"",isshow:false};
        }
        this.isDisplayResFileNameData=true;
      }).catch(err => {
        this.reqstatus = `请求失败${err}`;
      })
    },
    listFilesDetail(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      this.reqPath=prompt("请输入需要查询的路径（如/home/xxxx）：");
      axios({
        method: 'get',
        url: `http://${url}:8080/list_files_detail/`,
        params:{
          path:this.reqPath
        }

      }).then((res) => {
        let arr=res.data.split("\n");
        for(let i=0;i<arr.length;i++){
          this.arrFileName[i]={Filename:`${arr[i]}`,checked:false,downloadStatus:"",isshow:true}
        }
        this.isDisplayResFileNameData=true;
      }).catch(err => {
        this.reqstatus = `请求失败${err}`;
      })
    },
    getallipaddr(){
      axios({
      method: 'get',
      url: `http://${this.airplaneip}:8888/getallipaddr`,

    }).then((res) => {
      let arr = res.data.split(",");
      let arr1=[]
      arr1 = arr.sort((a,b)=>{
        const ip1 = a.split(".").map(e=>e.padStart(3,'0')).join("");
        const ip2 = b.split(".").map(e=>e.padStart(3,'0')).join("");
        return ip1-ip2;
      })
      this.arrIpAddrs=[{ipaddr:"",ischoose:false}];
      for(let i=0;i<arr1.length;i++){
        if(arr1[i]===this.ipvalue){
          this.arrIpAddrs[i]={ipaddr:arr1[i],ischoose:true};
        }else{
          this.arrIpAddrs[i]={ipaddr:arr1[i],ischoose:false};
        }
      }
      
    }).catch(err => {
      console.log(err);
    })
    this.isDisplay=false;
    this.isDisplay = true;
    },
    checkAll(){
      for(let i=0;i<this.arrFileName.length;i++){
        if(!this.arrFileName[i].disabled){
          this.arrFileName[i].checked=this.checkedAll;
        }
      }
    },
    async fileDownload(){
      this.isLoading=true;
      let arr1=[];
      for(let i=0;i<this.arrFileName.length;i++){
        if(this.arrFileName[i].checked===true){
          arr1=this.arrFileName[i].Filename.split(" ");
          this.arrFileName[i].downloadStatus="-正在下载-";
          await axios({
            method:"get",
            url:`http://${this.airplaneip}:8888/getimg`,
            params:{
              ip:this.ipvalue,
              ftpmethod:"get",
              path:this.reqPath,
              filename:arr1[9]
            }
          }).then((res)=>{
            if(!res.data){
              alert("查看是否插入SD卡");
              this.arrFileName[i].downloadStatus="";
            }else{
            this.arrFileName[i].downloadStatus="-下载完成-";
            console.log(res);
            }
          }).catch(err=>{
            this.arrFileName[i].downloadStatus="-下载失败-";
            console.log(err);
          })
        }
      }
      this.isLoading=false;
    },

    async fileDelete(){
      this.isLoading=true;
      let isdelete=confirm("确定要删除所有图片吗");
      if(isdelete){
        
        let arr1=[];
        for(let i=0;i<this.arrFileName.length;i++){
          if(this.arrFileName[i].checked===true){
            arr1=this.arrFileName[i].Filename.split(" ").filter("");
            await axios({
              method:"get",
              url:`http://${this.airplaneip}:8888/getimg`,
              params:{
                ip:this.ipvalue,
                ftpmethod:"delete",
                path:this.path,
                filename:arr1[9]
              }
            }).then((res)=>{
              console.log(res);
            }).catch(err=>{
              console.log(`删除失败${err}`)
            })
          }
        }
        this.listFilesDetail(this.ipvalue)
        this.isLoading=false;
      }else{
        return;
      }
    },
  },
  watch:{
    arrFileName:{
      handler(val){
        this.checkedAll=val.every(FileName=>FileName.checked);
      },
      deep:true
    }
  },
  
  created() {
    clearInterval(this.timer);
      this.timer=setInterval(this.getallipaddr,1000);
    },
}

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.baseBox {
  width: 100vw;
  height: 100vh;
}

li {
  list-style-type: none;
  font-size: 20px;
  background-color: white;
}

.box {
  float: left;
  width: 33vw;
  height: 75vh;
  border: 1px solid;
  overflow: hidden;
}
#box1 {
  width: 15vw;
  overflow: auto;
}

#box2 {
  width: 20vw;
}

#box3{
  width: 65vw;
}
.liofact{
  border: 1px solid #000000;
  margin-top: 20px;
  
}

button{
  margin:5px;
  font-size: 20px;
}

#resDataBox{
  height: 65vh;
  overflow-y: scroll;
}

b{
  color: red;
}

.firstbackcolor {
  background-color: orangered;
}

.secback-color {
  background-color: orangered;
}
</style>
